<template>
    <div class="view-page">
        <!-- 区域 -->
        <div class="hero-typewriter-gold-borders"></div>

        <!-- <section class="hero-section">
            <div class="hero-content">
                <div class="hero-text">
                    <h1>It's In Your<br>
                        Nature To <span class="highlight">Thri</span></h1>
                    <p style="font-size: 23px;line-height:1.1;font-weight:bold">Who you are today is already enough.
                        We're just here to
                        supplement you.
                    </p>
                    <button class="explore-button">Explore the Products that Supplement You</button>
                </div>
            </div>
        </section> -->

        <!-- 产品轮播图 -->
        <section class="product-carousel-section">
            <el-carousel ref="carousel" style="width:100%;height: 100%;display: flex;align-items:center"
                :autoplay="true" indicator-position="none" :interval="3000" trigger="click">
                <el-carousel-item style="width: 100%;height: 100%;display: flex;align-items:center"
                    v-for="(item, index) in filterNumberOfProductList" :key="index">
                    <div class="background"></div>
                    <img :src="item.productCarouselPic" alt="Co Q-10 200mg" class="product-bottle-background">
                    <!-- 当前轮播项 -->
                    <div class="carousel-item active">
                        <div class="carousel-content">
                            <!-- 右侧产品描述 -->
                            <div class="carousel-text">
                                <p class="carousel-subtitle">{{ item.name }}</p>
                                <h2 class="carousel-title">{{ item.subName }}</h2>
                                <!-- <p class="carousel-description">{{ item.info }}</p> -->
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>

            <!-- 轮播控制按钮 -->
            <!-- <div class="carousel-controls">
                <button class="carousel-prev" @click="prevSlide">&larr;</button>
                <button class="carousel-next" @click="nextSlide">&rarr;</button>
            </div> -->
        </section>

        <!-- You Are Bountiful 区域 -->
        <section class="you-are-bountiful">
            <div class="bountiful-header">
                <h2>You Are Bountiful</h2>
            </div>
            <homeProducct></homeProducct>
        </section>

        <!-- 乳腺癌慈善合作宣传卡片 -->
        <section style="background-color: #fcf1f6; padding: 136px 0 171px 0;">
            <div
                style="display: flex; max-width: 1400px; margin: 0 auto; align-items: center; gap: 3rem; padding: 0 5rem;">
                <!-- 左侧文字内容 -->
                <div style="flex: 1;">
                    <img src="@/assets/images/bounty/logo1.png" style="width:400px;margin-bottom:20px" alt="logo" />
                    <h2
                        style="color: #27463a; font-size: 40px; font-weight: bold; margin-bottom: 1.5rem;font-weight:700">
                        Together for Health and Hope
                    </h2>
                    <p style="color: #000000; line-height: 1.6; margin-bottom: 2rem;font-weight:700;font-size:16px">
                        We believe that true wellness goes beyond the body—it’s about caring for one another. Through
                        our charitable partnership, every purchase helps support health initiatives and bring hope to
                        those in need.
                        Because when we share love and care, we all grow stronger together.
                    </p>
                </div>

                <!-- 右侧图片 -->
                <div style="flex: 1;">
                    <img src="../../assets/images/bounty/SGK_Module_Img.png" alt="Susan G. Komen Partnership"
                        style="width: 100%; height: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
                </div>
            </div>
        </section>

        <!-- 邮件订阅组件 -->
        <section class="subscribe-section">
            <div class="subscribe-container">
                <!-- 左侧内容 -->
                <div class="subscribe-content">
                    <h2 class="subscribe-main-title">No matter where you are on your journey, we'll be your partner
                        every step of the way.</h2>
                </div>

                <!-- 右侧订阅表单 -->
                <div class="subscribe-form">
                    <div class="form-content">
                        <h3 class="subscribe-subtitle">Because you are bountiful.</h3>
                        <p class="subscribe-tagline">It's in your nature.</p>
                        <p class="subscribe-description">Want to learn more how Harvest Gain supplements your natural
                            brilliance?<br>Get the latest news, special offers and new product launches sent straight to
                            your inbox!</p>

                        <!-- 订阅表单 -->
                        <div class="email-form">
                            <input type="email" v-model="email" placeholder="Your Email" class="email-input" required>
                            <button @click="subscribe" class="subscribe-button">Sign Up</button>
                        </div>

                        <!-- 订阅成功提示 -->
                        <div v-if="subscribed" class="success-message">
                            <span class="checkmark">✓</span> Thanks for subscribing
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 探索页面内容区域 -->
        <section class="explore-section">
            <div class="explore-container">
                <div class="vertical-line"></div>
                <!-- 左侧内容 -->
                <div class="explore-left">
                    <h2 class="explore-title">It's in Your Nature to Explore</h2>
                    <p class="explore-subtitle">Health, wellness, nutrition, beauty, fitness, and more</p>
                    <p class="explore-description">Our blog is here to support you on your wellness journey - explore
                        our informative content.</p>
                    <div class="explore-buttons">
                        <a href="#" class="explore-btn primary-btn">READ MORE BLOGS</a>
                        <a href="#" class="explore-btn secondary-btn">VIEW ALL RECIPES</a>
                        <a href="#" class="explore-btn tertiary-btn">EXPLORE RESOURCES</a>
                    </div>
                </div>

                <!-- 右侧产品卡片 -->
                <div class="explore-right">
                    <!-- 产品卡片1 -->
                    <div class="product-card-item">
                        <div style="width:150%">
                            <div class="card-header">
                                <h3 class="card-title">Protect Your Cells and Feel Your Best with Organic Selenium
                                    Support.
                                </h3>
                            </div>
                            <div class="card-content">
                                <div class="card-description">
                                    <p>Cherry Selenium Tablets</p>
                                    <p>Supports antioxidant defense and overall wellness with natural cherry extract for
                                        daily vitality.*</p>
                                    <p>Orange Selenium Tablets
                                        Helps boost immune health and energy levels with refreshing vitamin C and
                                        selenium support.*</p>
                                    <p>Blueberry Selenium Tablets
                                        Delivers antioxidant power to help protect cells and support radiant skin from
                                        within.*</p>
                                    <p>Matcha Selenium Tablets
                                        Promotes natural detox and energy balance with green tea and selenium synergy.*
                                    </p>
                                    <p>Peach Selenium Tablets
                                        Supports glowing skin and overall wellness with juicy peach antioxidants and
                                        selenium power.*</p>
                                </div>
                            </div>
                        </div>
                        <div class="card-image">
                            <img src="../../assets/images/bounty/product/目录图硒片.png" alt="Hair Growth Product">
                        </div>
                    </div>

                    <!-- 产品卡片2 -->
                    <div class="product-card-item">
                        <div style="width:150%">
                            <div class="card-header">
                                <h3 class="card-title">Protect, Purify, and Revitalize — Naturally with Selenium Vine
                                    Tea.
                                </h3>
                            </div>
                            <div class="card-content">
                                <p class="card-description">Selenium Vine Tea helps support antioxidant protection and
                                    natural detox to promote overall wellness and balance.*
                                </p>
                            </div>
                        </div>
                        <div class="card-image">
                            <img src="../../assets/images/bounty/product/目录图藤茶.jpg" alt="Digestive Probiotic 10">
                        </div>
                    </div>

                    <!-- 产品卡片3 -->
                    <div class="product-card-item">
                        <div style="width:150%">
                            <div class="card-header">
                                <h3 class="card-title">Share the Love, Change a Life
                                </h3>
                            </div>
                            <div class="card-content">
                                <p class="card-description">Let Love Continue to Spread
                                    Every small act of kindness creates ripples of hope.
                                    Together, we can make the world a little warmer, one heart at a time.

                                </p>
                            </div>
                        </div>
                        <div class="card-image">
                            <img src="../../assets/images/bounty/product/love.png" alt="Probiotic Wellness">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 内容banner -->
        <ContentBanner />

        <Instagram />
    </div>
</template>

<script>
import {
    selectProductList,
    selectProductCategoryList,
    bountySubscribe,
} from "@/config/api";
import Instagram from "@/components/instagram/index.vue";
import homeProducct from "@/components/common/homeProducct.vue";
import ContentBanner from "@/components/content-banner/index.vue";

export default {
    name: "HomePage",
    components: {
        Instagram,
        ContentBanner,
        homeProducct,
    },
    computed: {
        filterCategoryName() {
            return (categoryId) => {
                const category = this.productCategoryList.find(
                    (item) => item.id === categoryId
                );
                return category ? category.name : "Unknown";
            };
        },
        filterNumberOfProductList() {
            return JSON.parse(JSON.stringify(this.productList)).splice(0, 7);
        },
    },
    data() {
        return {
            productList: [],
            productCategoryList: [],
            email: "",
            subscribed: false,
            banner: [
                {
                    img: require("../../assets/images/bounty/content-product-1.png"),
                    text1: "Your heart is strengthened by laughing out loud.",
                    text2: `It's In Your Nature To Play`,
                    info: `Nature's Bounty supplements your cardiovascular
                                        health with
                                        Co Q-10.*`,
                },
                {
                    img: require("../../assets/images/bounty/content-product-1.png"),
                    text1: "Your heart is strengthened by laughing out loud.",
                    text2: `It's In Your Nature To Play`,
                    info: `Nature's Bounty supplements your cardiovascular
                                        health with
                                        Co Q-10.*`,
                },
                {
                    img: require("../../assets/images/bounty/content-product-1.png"),
                    text1: "Your heart is strengthened by laughing out loud.",
                    text2: `It's In Your Nature To Play`,
                    info: `Nature's Bounty supplements your cardiovascular
                                        health with
                                        Co Q-10.*`,
                },
            ],
        };
    },
    created() {
        this.getProductList();
        this.getProductCategoryList();
    },
    methods: {
        // 订阅处理方法
        subscribe() {
            if (this.email) {
                bountySubscribe({ 'email': this.email }).then((res) => {
                    this.subscribed = true;
                    // 重置输入框
                    this.email = "";
                    // 5秒后隐藏成功消息
                    setTimeout(() => {
                        this.subscribed = false;
                    }, 5000);
                });
            }
        },
        getProductList() {
            selectProductList().then((res) => {
                this.productList = res.data;
            });
        },
        getProductCategoryList() {
            selectProductCategoryList().then((res) => {
                this.productCategoryList = res.FormData;
            });
        },
        prevSlide() {
            console.log("Previous slide");
            this.$refs.carousel.prev();
        },
        nextSlide() {
            console.log("Next slide");
            this.$refs.carousel.next();
        },
    },
};
</script>

<style scoped lang="less">
/* You Are Bountiful 区域样式 */
.you-are-bountiful {}

.bountiful-header {
    background: linear-gradient(269.9deg,
            rgba(172, 152, 48, 1) 0.07%,
            rgba(198, 181, 92, 1) 27.24%,
            rgba(244, 224, 152, 1) 53.36%,
            rgba(192, 174, 86, 1) 78.44%,
            rgba(172, 152, 48, 1) 100.38%);
    width: 100%;
    padding: 35px 0px 50px 0px;
    text-align: center;
    font-size: 3.5rem;
    line-height: 1;
    color: #fff;
    font-weight: 800;
    position: relative;
}

.bountiful-header h2 {
    margin: 0;
    padding: 0;
}

.show-all-products-btn:hover {
    background-color: #9f7f42;
}

.product-card-item {
    background: white;
    width: 95%;
    // height: 400px;
    position: relative;
    overflow: hidden;
    // aspect-ratio: 4/5;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 20px;
}

/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Arial", sans-serif;
    line-height: 1.6;
    color: #333;
}

/* 导航栏样式 */
.nav-bar {
    background-color: #fff;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000;
    font-family: "Georgia", serif;
    letter-spacing: 0.05em;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-dropdown {
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 400;
    font-size: 0.9rem;
    padding: 0.5rem 0;
    display: block;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #666;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.search-icon {
    font-size: 1.1rem;
    cursor: pointer;
}

.where-to-buy {
    background-color: #8bc53f;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.where-to-buy:hover {
    background-color: #7aae37;
}

.hero-typewriter-gold-borders {
    height: 10px;
    background: linear-gradient(269.9deg,
            rgba(172, 152, 48, 1) 0.07%,
            rgba(198, 181, 92, 1) 27.24%,
            rgba(244, 224, 152, 1) 53.36%,
            rgba(192, 174, 86, 1) 78.44%,
            rgba(172, 152, 48, 1) 100.38%);
}

/* 英雄区域样式 */
.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
        url("../../assets/images/bounty/courseal.jpg");
    background-size: cover;
    background-position: center;
    height: calc(100vh - 98px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
}

.hero-text {
    color: #fff;
    max-width: 500px;
    text-align: left;
}

.hero-text h1 {
    /* font-size: 3.5rem; */
    margin-bottom: 1.5rem;
    /* font-weight: 300; */
    /* line-height: 1.1; */
    line-height: 1.2;
    font-size: 4rem;
    color: #ffffff;
    font-weight: 800;
    text-shadow: 2px 2px 2px #00000033;
}

.highlight {
    color: #8bc53f;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.explore-button {
    font-size: 1.1rem;
    text-decoration: none;
    padding: 16px 30px;
    min-width: 256px;
    border-radius: 50px;
    margin-top: 40px;
    display: block;
    width: fit-content;
    transition: all 0.2s ease-out;
    color: #27463a;
    background-color: #d2e38f;
    border: 2px solid;
    border-color: #d2e38f;
    font-weight: bold;
}

.explore-button:hover {
    background-color: #ffffff00;
}

.learn-more-button-3 {
    padding: 16px 30px;
    min-width: 256px;
    width: fit-content;
    background-color: #d2e38f;
    color: #27463a;
    border: 1px solid #d2e38f;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
}

/* 产品轮播图样式 */
.product-carousel-section {
    position: relative;
    background-color: #2e453b;
    /* padding: 4rem 0; */
    overflow: hidden;
    width: 100%;
    /* min-height: calc(100vh - 104px); */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;

    ::v-deep .el-carousel__container {
        width: 100%;
        height: 100%;
    }

    ::v-deep .el-carousel__arrow {
        border: none;
        outline: 0;
        padding: 0;
        margin: 0;
        height: 60px !important;
        width: 60px !important;
        cursor: pointer;
        -webkit-transition: 0.3s;
        transition: 0.3s;
        border-radius: 50%;
        background-color: #ffffff42;
        color: #fff;
        position: absolute;
        top: 50%;
        z-index: 10;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        font-size: 28px;
    }
}

.background {
    position: absolute;
    top: 0%;
    left: 0;
    width: 50vw;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
}

.product-bottle-background {
    width: 50vw;
    height: 100%;
    object-fit: cover;
    /* 确保图片按比例缩放并裁剪 */
    object-position: center;
    /* 图片基于中心点对齐 */
    z-index: 1;
}

.carousel-container {
    position: relative;
    width: calc(50vw + 220px);
    left: calc(50vw - 300px);
    z-index: 10;
}

.carousel-item {
    display: none;
    width: 50vw;
}

.carousel-item.active {
    display: flex;
    justify-content: start;
    align-items: center;
}

.carousel-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    /* gap: 4rem; */
}

.carousel-image {
    /* flex: 1; */
    display: flex;
    justify-content: start;
    align-items: center;
    animation: fade-bottom 1s ease-in-out;
    border-radius: 10px;

    img {
        width: 500px;
        height: 500px;
    }
}

@keyframes fade-bottom {
    0% {
        transform: translateY(-150px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.product-bottle {
    max-width: 500px;
    height: auto;
    border-radius: 5px;
    z-index: 2;
}

.carousel-text {
    flex: 1;
    color: white;
    text-align: left;
    margin-left: 5cm;
}

@media (min-width: 768px) {
    .carousel-text {
        flex: 1;
        color: white;
        text-align: left;
        margin-left: 0cm !important;
    }
}

.carousel-subtitle {
    color: #d2e38f;
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 800;
    // padding-right: 60px;
    max-width: 631px !important;
    animation: fade-bottom 1s ease-in-out;
}

.carousel-title {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    animation: fade-bottom 1s ease-in-out;
}

.carousel-description {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 20px;
    line-height: 1.5;
    font-weight: 700;
    animation: fade-bottom 1s ease-in-out;
}

.carousel-controls {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    gap: 1rem;
}

.carousel-prev,
.carousel-next {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
}

.carousel-prev:hover,
.carousel-next:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* 邮件订阅组件样式 */
.subscribe-section {
    padding: 60px 20px;
    background-color: #ffffff;
}

@media (max-width: 992px) {
    .subscribe-container {
        flex-direction: column !important;
        gap: 13px;
        padding: 30px 0 !important;
    }

    .subscribe-content {
        padding-left: 40px !important;
    }

    .subscribe-form {
        padding: 40px;
        width: 100% !important;
    }

    .email-input {
        flex: 1;
        padding: 30px 20px !important;
        border: 1px solid #000000;
        border-radius: 50px 0 0 50px;
        font-size: 2.2rem !important;
        outline: none;
        -webkit-transition: border-color 0.3s;
        transition: border-color 0.3s;
    }

    .subscribe-button {
        font-size: 2rem !important;
    }
}

@media (min-width: 1680px) {
    .subscribe-form {
        max-width: 500px;
    }
}

.subscribe-container {
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 100px 0px;
}

.subscribe-content {
    flex: 1;
    padding-right: 40px;
}

.subscribe-main-title {
    color: #2e453b;
    line-height: 1.3;
    margin: 0;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.subscribe-form {
    flex: 1;
}

.form-content {
    text-align: left;
}

.subscribe-subtitle {
    font-size: 2em;
    font-weight: 600;
    color: #2e453b;
    margin: 0 0 5px 0;
}

.subscribe-tagline {
    font-size: 2em;
    color: #67893c;
    font-weight: bold;
    margin: 10px 0px;
}

.subscribe-description {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.5;
    margin: 0 0 25px 0;
    font-weight: 700;
}

.email-form {
    display: flex;
    gap: 0;
}

.email-input {
    flex: 1;
    padding: 20px 15px;
    border: 1px solid #000000;
    border-radius: 50px 0 0 50px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.email-input:focus {
    border-color: #809e2c;
}

.subscribe-button {
    background-color: #809e2c;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0 50px 50px 0;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.subscribe-button:hover {
    background-color: #6a8524;
}

.success-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: #809e2c;
    font-size: 0.95rem;
    animation: fadeIn 0.3s ease-in-out;
}

.checkmark {
    font-size: 1.2rem;
    font-weight: bold;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 探索页面内容样式 */
.explore-section {
    background-color: #f8f9f4;
}

.explore-container {
    position: relative;
    display: flex;
    width: 100%;
    /* gap: 60px; */
    justify-content: space-between;
}

/* 左侧内容样式 */
.explore-left {
    /* flex: 1; */
    background: #fff;
    position: relative;
    padding-left: 90px;
    padding-right: 30px;
    width: 100%;
    padding-top: 100px;
    z-index: 1;
}

.vertical-line {
    position: absolute;
    left: 100px;
    top: -60px;
    height: 140px;
    width: 4px;
    z-index: 10;
    background-color: #809e2c;
}

@media (min-height: 768px) {
    .vertical-line {
        display: none;
    }

    .explore-left {
        padding-top: 40px !important;
    }

    .explore-buttons {
        flex-direction: row !important;
    }
}

@media (min-width: 1680px) {
    .vertical-line {
        display: block;
    }

    .explore-left {
        padding-top: 100px !important;
    }
}

.explore-title {
    font-weight: 800;
    color: #27463a;
    margin: 0 0 15px 0;
    line-height: 1.2;
    font-size: 40px;
    line-height: 50px;
}

.explore-subtitle {
    font-size: 1.2rem;
    color: #809e2c;
    margin: 0 0 20px 0;
    font-weight: 700;
}

.explore-description {
    font-size: 1rem;
    color: #000000;
    margin: 0 0 30px 0;
    line-height: 1.6;
    max-width: 450px;
    font-weight: 700;
}

.explore-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.explore-btn {
    display: inline-block;
    padding: 12px 20px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    width: fit-content;
    color: #809e2c;
}

/* 右侧产品卡片样式 */
.explore-right {
    padding: 20px;
    /* flex: 1; */
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: rgb(188, 214, 172) !important;
    width: 100%;
}

.card-header {
    padding: 20px 20px 10px 16px;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #090909;
    margin: 0;
    line-height: 1.4;
}

.card-content {
    padding: 0px 20px 20px 20px;
    flex: 1;
}

.card-description {
    font-size: 1.1rem;
    margin: 15px 0 15px 0;
    line-height: 1.5;
    font-weight: 500;
    color: #090909;
}

.read-more {
    display: inline-block;
    color: #809e2c;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #6a8524;
}

.card-image {
    display: flex;
    justify-content: center;
    width: 110%;
    height: 100%;
}

.card-image img {
    width: 100%;
    height: 100%;
    height: auto;
    /* max-height: 150px; */
    object-fit: cover;
    border-radius: 10px;
}

/* 响应式设计 */
@media (max-width: 992px) {
    .explore-container {
        flex-direction: column;
        gap: 0;
    }

    .explore-left {
        padding-left: 40px;
    }

    .explore-title {
        font-size: 3rem;
    }


    .explore-subtitle {
        font-size: 2rem;
    }

    .explore-description {
        font-size: 2rem;
        max-width: 60%;
        margin-bottom: 10px;
    }

    .explore-buttons {
        align-items: center;
    }

    .explore-btn {
        width: 100%;
        font-size: 30px !important;
        padding: 40px 20px !important;
    }

    .card-title {
        font-size: 3rem;
    }

    .card-description {
        font-size: 2rem;
    }
}



.content-banner__content-rebrand-content_banner {
    background-color: #7fa76e;
}

.content-banner__content {
    min-height: 260px;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-banner img {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.content-banner__text-content_banner {
    color: #ffffff;
}

.content-banner__text {
    margin: 31px auto 0 auto;
    padding: 0 10px;
}

.content-banner__gradient-rebrand-content_banner {
    width: 100%;
    height: 4px;
    background: linear-gradient(269.9deg,
            rgba(172, 152, 48, 1) 0.07%,
            rgba(198, 181, 92, 1) 27.24%,
            rgba(244, 224, 152, 1) 53.36%,
            rgba(192, 174, 86, 1) 78.44%,
            rgba(172, 152, 48, 1) 100.38%);
}
</style>
